<template>
	<div class="home">
		<div class="home-top">

		</div>
		<div class="home-own">
			<div class="home-own-left">
				<a href="javascript:0;" class="home-own-left-pic">
					<img :src="me.headImgUrl?me.headImgUrl:'../../assets/person.jpg'">
				</a>
				<div>
					<div>
						<i class="icon icon-man"></i><span>{{me.nickname}}</span>
					</div>
					<span class="home-own-left-id">ID:{{me.id}}</span>
					<div>
						<i class="icon icon-phone"></i>
						<i class="icon icon-email"></i>
						<i class="icon icon-realname"></i>
					</div>
					<el-button type="primary" @click="toPersonCenter">进入个人中心</el-button><br/>
					<el-button type="text" size="mini" @click="logout">退出</el-button>
				</div>	
			</div>
			<div class="home-own-right">
				<div class="home-own-right-top">
					<span class="home-own-right-top-title">我的好友</span>
					<span class="home-own-right-top-more" @click="toFriend">查看全部></span>
				</div>
				<div class="home-own-right-list">
					<ul v-if="friends.list.length!=0">
						<li @click="toOther(item.memId.id)" v-for="(item,index) in friends.list" :key="index">
							<img :src="item.memId.headImgUrl" alt="" class="img-responsive">
							<div class="home-own-right-list-info"><i class="icon icon-man"></i><span>{{item.memId.nickname}}</span></div>
						</li>
					</ul>
					<p v-else>还没有好友哦！快去添加好友吧！</p>
				</div>
			</div>
		</div>
		<div class="home-other" v-loading="loading">
			<div class="home-other-list">
			  	<el-card :body-style="{ padding: '0px' }" class="home-other-detail" v-for="(item,index) in person.list" :key="index">
			      	<img :src="item.memId.headImgUrl" @click="toOther(item.memId.id)">
			      	<div class="home-other-detail-info">
						<p>{{item.memId.nickname}}<i class="icon icon-man home-other-detail-info-icon"></i></p>
						<p>{{item.age | agefilters}}{{item.workAddress | addrfilters}}{{item.salary | incomefilters}}</p>
						<p>{{item.about | aboutfilters}}</p>
		      		</div>
		      		<div class="home-other-detail-icon">
		      			<i class="icon icon-phone"></i>
		      			<i class="icon icon-email"></i>
		      		</div>
			    </el-card>
		  	</div>
			<pagination :total="person.total" @pageChange="handlePageChange" :current-page="person.currentPage"></pagination>
		</div>
	</div>
</template>

<script>
	import pagination from '../../widget/pagination/pagination.vue'
	import initImg from '../../assets/person.jpg'
	export default {
	  	name: 'home',
	  	data () {
	    	return {
	    		loading: true,
	    		me: {
	    			nickname: '',
	    			id: '',

	    		},
	      		person: {
	      			list: [],
	      			currentPage: 1,
	      			total: 0,

	      		},
	      		friends: {
	      			list: []
	      		}
	    	}
	  	},
	  	components: {
		    pagination: pagination
		},
		filters: {  
		    agefilters: function (value) {
		    	if(value) {
		    		return value + '岁' + '/' 
		    	}  
		    },
		    addrfilters: function (value) {
		    	if(value) {
		    		return value + '/' 
		    	}  
		    },
		    incomefilters: function (value) {
		    	if(value) {
		    		return value + '元'
		    	}  
		    },
		    aboutfilters: function (value) {
		    	if(value) {
		    		return value
		    	}else {
		    		return '这家伙很懒什么都没写'
		    	}
		    }     
		 },
		 mounted: function(){
		 	this.initMe();
		 	this.getMemberList();
		 	this.getFriend();
		 },
		 methods: {
		 	initMe() {
		 		let me = JSON.parse(sessionStorage.getItem("user"));
		 		this.me = me;
		 		me.headImgUrl = this.$img + me.headImgUrl;
		 	},
		 	handlePageChange(val) {
		 		this.person.currentPage = val;
		 		
		 	},
		 	toOther(id) {
		 		this.$router.push({ name: 'otherPage', query: { userId: id }})
		 	},
		 	getMemberList() {
		 		this.loading = true;
		 		this.$http({
					method: 'get',
					url: 'personlist/list',
					params: {
					    "pageSize": 16,
					    "page": 1
					}        					
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.person.list = response.data.object.objects;
						this.person.total = response.data.object.totalPage;
						for(let i=0; i<this.person.list.length; i++) {
							if(this.person.list[i].memId.headImgUrl != null){
								this.person.list[i].memId.headImgUrl = this.$img + this.person.list[i].memId.headImgUrl
							}else{
								this.person.list[i].memId.headImgUrl = initImg
							}
						}
						this.loading = false;
					}
				}).catch((err)=>{  
				})
		 	},
		 	toPersonCenter() {
		 		this.$router.push({ path: '/base/personCenter'})
		 	},
		 	logout() {
		 		this.$http({
					method: 'post',
					url: 'log/logout',
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.$router.push({ path: '*'})
					}
				}).catch((err)=>{
				})  
		 	},
		 	getFriend() {
		 		this.$http({
					method: 'get',
					url: 'friend/listFriend',			
				}).then((response)=>{
					if(response && response.data.status == 'SUCCESS') {
						this.friends.list = response.data.object;
						for(var i=0; i<this.friends.list.length; i++) {
							if(this.friends.list[i].memId.headImgUrl != null){
								this.friends.list[i].memId.headImgUrl = this.$img + this.friends.list[i].memId.headImgUrl
							}else {
								this.friends.list[i].memId.headImgUrl = initImg
							}
						}
					}
				}).catch((err)=>{  
				})
		 	},
		 	toFriend() {
		 		this.$router.push({ path: '/base/personCenter'})
		 	}
		 }  
	}
</script>

<style scoped>
	.home {
		background-color: #f4f4f4;
	}
	.home-top {
		margin: 0 auto;
		width: 100%;
		background: url(../../assets/home_bg.jpg) no-repeat;
		background-size: 100% 100%;
		height: 400px;
	}
	.home-own {
		width: 1100px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 20px 0;
		overflow: hidden;
		background-color: #fff;
	}
	.home-own-left {
		border-right: 1px solid #d0cdc7;
		width: 220px;
		text-align: center;
		float: left;
	}
	.home-own-left-pic {
		display: inline-block;
		overflow: hidden;
		width: 90px;
		height: 90px;
		border-radius: 50%;
	}
	.home-own-left-pic img {
		width: 100%;
		height: 100%;	
	}
	.home-own-left-id {
		color: #999999;
		font-size: 10px;
	}
	.home-own-right {
		float: left;
		padding-left: 40px;
		padding-right: 40px;
		width: 799px;
	}
	.home-own-right-top-title {
		border-bottom: 2px solid #f85377;
		padding-bottom: 3px;
		letter-spacing: 2px;
	}
	.home-own-right-top-more {
		float: right;
		color: #999999;
		cursor: pointer;
	}
	.home-own-right-list {
		margin-top: 30px;
	}
	.home-own-right-list p {
		color: #999999;
		text-align: center;
	}
	.home-own-right-list ul {
		margin: 0;
		padding: 0;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
	}
	.home-own-right-list ul li{
		float: left;
		list-style: none;
		text-align: center;
		cursor: pointer;
	}
	.home-own-right-list ul li img{
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}
	.home-own-right-list-info {
		margin-top: 10px;
	}
	.home-other {
		width: 1100px;
		margin: 0 auto;
		margin-top: 20px;	
		background-color: #fff;	
	}
	.home-other-list {
		overflow: hidden;

	}
	.home-other-detail {
		width: 220px;
		margin-top: 35px;
		float: left;
		margin-left: 35px;
	}
	.home-other-detail img {
		cursor: pointer;
		height: 205px;
		width: 220px;
	}
	.home-other-detail-info {
		padding-left: 10px;
		text-align: left;
		font-size: 14px;
	}
	.home-other-detail-info-icon {
		margin-left: 10px;
	}
	.home-other-detail-icon {
		text-align: right;
	}	
</style>